<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>drawCircle</title>
</head>
<style>
  canvas {
    display: block;
    border: 1px solid green;
    margin: 30px auto;
  }
</style>
<body>
  <canvas id="canvas" width="600" height="400"></canvas>
</body>

<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d');
  const dpr = window.devicePixelRatio || 1

  /** 
   * 获取适应dpr的canvas画布
  */
  function getCanvasWithDpr(dpr, canvas, ctx) {
    const oldWidth = canvas.width
    const oldHeight = canvas.height

    canvas.width = oldWidth * dpr
    canvas.height = oldHeight * dpr

    canvas.style.width = oldWidth + 'px'
    canvas.style.height = oldHeight + 'px'

    ctx.scale(dpr, dpr)
  }

  getCanvasWithDpr(dpr, canvas, ctx)

  /**
   * 绘制坐标轴
  */
  function drawAxis(wd, ht, pad, step, ctx) {
    // 设置Y轴
    ctx.beginPath();
    ctx.strokeStyle = '#333'
    ctx.moveTo(pad, pad)
    ctx.lineTo(pad, ht - pad)
    ctx.stroke()

    // 设置X轴
    ctx.moveTo(pad, ht - pad) // 起始点就是Y轴绘制的终点
    ctx.lineTo(wd - pad, ht - pad)
    ctx.stroke()
    ctx.closePath();

    // 设置刻度
    ctx.beginPath()
    for (let i = 1; i < Math.floor(wd / step); i++) {
      ctx.strokeStyle = 'red'
      ctx.moveTo(pad + i * step, ht - pad)
      ctx.lineTo(pad + i * step, ht - pad + 10)
      ctx.stroke()
    }

    for (let i = 1; i < Math.floor(wd / step); i++) {
      ctx.moveTo(pad, ht - pad - step * i)
      ctx.lineTo(pad + 10, ht - pad - step * i)
      ctx.stroke()
    }
    ctx.beginPath()
  }

  // 设置坐标轴参数
  const wd = canvas.style.width.replace(/\D/g, '')
  const ht = canvas.style.height.replace(/\D/g, '')
  const pad = 20 // 边界值
  const step = 50 // 刻度间距

  drawAxis(wd, ht, pad, step, ctx)

  // 绘制圆环
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.fillStyle = 'orange'
  /**
   * 参数依次为
   * 圆心x坐标，圆心y坐标，半径，起始角度，终止角度，是否逆时针
  */
  ctx.arc(200, 200, 100, 0, Math.PI * 2)
  ctx.fill()
  ctx.closePath()

  // 绘制圆弧
  ctx.beginPath()
  ctx.lineWidth = 3
  ctx.strokeStyle = 'lightblue'
  // 逆时针，从270度绘制到0度
  ctx.arc(300, 300, 30, -Math.PI / 2, 0, true)
  ctx.stroke()
  ctx.closePath()
</script>
</html>